<template>
  <div class="ModPwd">
    <h3>用户密码修改</h3>
    <div class="headImg">
      <img v-if="user.avatar" :src="dalImg(user.avatar)" />
      <img v-else src="../../assets/image/2124212.jpg" />
    </div>
    <input type="password" v-model="oldPwd" placeholder="请输入原密码" />
    <input type="password" v-model.trim="aa" placeholder="请输入新密码" />
    <button id="save" @click="save">
      <!-- <router-link :to="{ name: 'User' }"></router-link> -->
      保 存
    </button>
  </div>
</template>
<!-- js -->
<script setup>
import { ref } from "vue";
import { modifyUserPwd, loadUserInfoAPI } from "../../services/auth";
import { dalImg } from "../../utils/tools";
import { Toast } from "vant";
import { useRouter } from "vue-router";

let aa = ref();
const user = ref({});
const oldPwd = ref();
const { push } = useRouter();

//加载用户信息
loadUserInfoAPI().then((res) => {
  // console.log(res);
  user.value = res.data;
  // oldPwd.value = res.data.password;
});

//修改密码
const save = async () => {
  let params = `password=${aa.value}&oldPassword=${oldPwd.value}`;
  const res = await modifyUserPwd(params);
  // console.log(res);
  if (res.code == 1) {
    Toast({ message: "密码修改成功,请重新登录" });
    setTimeout(() => {
      push({ name: "Login" });
    }, 1000);
  }
};
</script>
<!-- 样式 -->
<style scoped>
h3 {
  text-align: center;
  margin: 0.5rem;
}
.headImg {
  display: flex;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  border: 1px solid #b8b3b3;
  margin: 4rem auto;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
img {
  height: 8rem;
  vertical-align: middle;
}

button {
  width: 16rem;
  height: 3rem;
  border: none;
  border-radius: 0.5rem;
  background-color: rgb(229, 226, 224);
  color: rgb(41, 40, 40);
  font-size: 1.2rem;
}

input {
  display: block;
  width: 16rem;
  height: 2.5rem;
  border: 1px solid #ababab;
  margin: 5rem auto;
  text-indent: 1rem;
  font-size: 1.2rem;
}
#save {
  width: 16rem;
  height: 4rem;
  display: block;
  margin: 5rem auto;
  border: none;
  background-color: rgb(232, 31, 31);
  color: white;
  font-size: 1.1rem;
}
#save a {
  color: white;
}
</style>
